<template>
  <div>
    <h1 class="mytitle">天气工具</h1>
    <div class="iocn_wrap">
      <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>天气预报</h1>
          <div>
              根据城市查询天气
          </div>
      </div>
      <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div>
            每日为您推荐电影
          </div>
      </div>
        <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div>
            每日为您推荐电影
          </div>
      </div>
        <div class="nav_one">
          <img src="../../assets/logo.png" alt="">
          <h1>每日电影</h1>
          <div class="des">
            每日为您推荐电影
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '2209vueIndex',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>
<style lang="less">
.mytitle{
  margin-left:40px;
  font-size:40px;
  
}
    .iocn_wrap{
      width:80%;
      margin:20px auto;
      display:flex;
      justify-content:space-between;
      .nav_one{
        width:20%;
        height:300px;
        text-align:center;
        align-items:center;
        background:pink;
       display:flex;
      justify-content:space-around;
      flex-direction:column;
        >div{
          font-size: 18px !important;
        }
        &:nth-child(2){
           background:purple;
        }
         &:nth-child(3){
           background:skyblue;
        }
        h1{
          color:white;
          font-size:30px;
        }
        img{
          width:120px;
          height:120px;
        }
      }
    }
</style>